<template>
	<view>
		<view style="margin-top: 6px;">
		    <view class="reasons" >
		        <view style="display: flex;">
					<span style="font-size: 12px;padding-left: 10rpx;width: 160rpx;">申请原因：</span>
					<span style="line-height: 30rpx;">{{reason}}</span>
				</view>
		    </view>
			<view class="reasons" >
			    <view style="display: flex;">
					<span style="font-size: 12px;padding-left: 10rpx;width: 160rpx;">申请说明：</span>
					<span>{{refund_describe}}</span>
				</view>
			</view>
		    <view class="shuoming">
				<span style="font-size: 12px;padding-left: 10rpx;">申诉理由：</span>
		        <textarea type="text" @input="detail" placeholder="请您填写详细的申诉原因,有助更快获得通过" style="padding-left: 10rpx;"></textarea>
		    </view>
		    <view style="display: flex;background-color: white;padding: 10px;margin-bottom: 10px;" class="telbox">
		        <view style="font-size: 12px;flex: 2;line-height:20px;">联系方式:</view>
		        <view style="flex: 6;"><input type="number" disabled v-model="tel" style="padding: 0px;margin: 0px;"></view>
		    </view>
			<view style="display: flex;background-color: white;padding: 10px;margin-bottom: 10px;" class="telbox">
			    <view style="font-size: 12px;flex: 2;line-height:20px;">退货数量:</view>
			    <view style="flex: 6;"><input type="number" disabled v-model="num" style="padding: 0px;margin: 0px;"></view>
			</view>
		    <view class="picbox">
		        <view style="font-size: 12px;flex: 2;line-height:40px;padding-left: 10rpx;">照片凭证：(不可修改)</view>
				<view style="display: flex;">
					<image class="pingzheng" :src="tu1" v-if="tu1!=''"></image>
					<image class="pingzheng" :src="tu2" v-if="tu2!=''"></image>
					<image class="pingzheng" :src="tu3" v-if="tu3!=''"></image>
				</view>
		    </view>
		    <view style="text-align: center; margin-top: 16px;">
		        <button type="button" @click="submit()" class="tuikuan">提交申请</button>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',				//退换货ID
				tel:'', 			//联系电话
				num:'',				//退货数量
				reason:'',			//申请原因
				refund_describe:'', //申请说明
				refund_type:0,	    //退换货类型
				tu1:'',				//照片凭证1
				tu2:'',				//照片凭证2
				tu3:'',				//照片凭证3
				shensuReason:'',	//申诉原因
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getRefundInfo()
		},
		methods: {
			//提交申请
			submit() {
				if(this.isNull(this.shensuReason)){
					this.$u.toast("请填写申诉理由！")
				}else{
					this.$http.post('/ppRefund/userShensu',{
						refundID:this.id,
						shensuyuanyin:this.shensuReason
					}).then(res => {
						if(res.data.code==200){
							this.$u.toast("申诉成功，等待平台处理")
							setTimeout(()=>{
								uni.navigateTo({
									url:'../center/center'
								})
							},500)
						}else{
							if(this.isNull(res.data.msg)){
								this.$u.toast("申请失败，请稍后重试")
							}else{
								this.$u.toast(res.data.msg)
							}
						}
					})
				}
			},
			//得订单退换货信息
			getRefundInfo(){
				this.$http.get('/ppRefund/selectRefundById',{
					id:this.id
				}).then(res => {
					if(res.data.code==200){
						this.tel = res.data.data.user_contact;
						this.num = res.data.data.refund_number;
						this.refund_describe = res.data.data.refund_describe;
						if(res.data.data.picture1!=""){
							this.tu1 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture1;
						}
						if(res.data.data.picture2!=""){
							this.tu2 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture2;
						}
						if(res.data.data.picture3!=""){
							this.tu3 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture3;
						}
						let reson = "";
						switch(res.data.data.refund_reason){
							case 0:reson='其他';break
							case 1:reson='7天无理由退货';break
							case 2:reson='质量问题';break
							case 3:reson='发票问题';break
							case 4:reson='不喜欢了/不爱了';break
							case 5:reson='拍错了/看错了';break
							case 6:reson='未按约定时间发货';break
						}
						this.reason = reson;
					}else{
						this.$u.toast("信息查询失败")
					}
				})
			},
			//得申诉理由
			detail(e){
				this.shensuReason = e.target.value;
			},
			// 判断是否为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.pingzheng{
		width: 300rpx;
		height: 260rpx;
	}
	.tuikuan{
		width: 200rpx;
		height: 70rpx;
		font-size: 14px;
		color: white;
		line-height: 70rpx;
		background-color: #dd524d;
	}
	#showUserPicker{
		font-size: 14px;
	}
	.jt img{
		width: 16px;
		height: 16px;
	}
	.reasons,.shuoming{
		background-color: white;
		padding: 10px 0px;
		margin-bottom: 10px;
	}
	.shuoming textarea{
		height: 60px;
		width: 100%;
	}
	.shuoming textarea,.telbox input{
		border: none;
		padding: 0px;
		font-size: 14px;
	}
	.picbox{
		background-color: white;
	}
	.pics{
		display: flex;
		justify-content: center;
	}
	.pics>view{
		width: 125px;
		margin-right: 10px;
		position: relative;
		background: url("../../static/center/picup.png") no-repeat center;
		background-size: 50px 50px;
	}
	.pics img{
		width: 100%;
		height: 120px;
	}
</style>
